<template>
  <div class="app-container calendar-list-container">
    <el-form :model="q" ref="q" label-width="100px" class="el-form filter-container" v-if="isAdminRole" >
      <el-row>
        <el-col :span="6">
          <el-form-item label="起始日期" prop="startDate">
            <el-date-picker v-model="q.startDate" type="date" placeholder="起始日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker v-model="q.endDate" type="date" placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登陆Id" prop="userName">
            <el-input placeholder="登陆Id" v-model="q.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="cx-btnbox">
          <el-button round class="r" type="primary" @click="resrtFrom ">重置</el-button>
          <el-button round class="r" type="primary" @click="getList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <v-tree ref='vtree' :data="nodes" :tpl="tpl" :halfcheck="false" @async-load-nodes="asyncLoad2"/>
  </div>
</template>


<script>
import { GetRelationshipMap } from '@/api/netPoint'
import { mapGetters } from 'vuex'
import VTree from 'vue-tree-halower'
import '@/styles/halower-tree.min.css'

export default {
  name: 'relationshipMap',
  data() {
    return {
      nodes: [{
        title: '用户点位列表',
        expanded: false,
        async: true
      }],
      q: {
        startDate: '',
        endDate: '',
        userName: '',
        id: 0
      }
    }
  },
  components: {
    VTree
  },
  computed: {
    ...mapGetters([
      'roles'
    ]),
    isAdminRole() {
      return this.roles.includes('ADMIN')
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resrtFrom() {
      this.$refs['q'].resetFields()
    },
    getList() {
      var _this = this
      _this.getRelationshipMapData(x => {
        _this.nodes = x
      })
    },
    getRelationshipMapData(cb) {
      var _this = this
      GetRelationshipMap(this.q).then(response => {
        var a = response.data.map(x => {
          return {
            expanded: false,
            async: true,
            data: Object.assign(x, { creationTime: _this.$moment(x.creationTime) })
          }
        })
        cb(a)
      })
    },
    tpl(node, ctx) {
      if (node.title) {
        return <span class='node-title' domPropsInnerHTML={node.title} ></span>
      }
      return <span>
        <el-tag type='danger' size='mini'>【{['注', '奖'][node.data.pointType]}】{['A', 'B', 'C'][node.data.netType]}网</el-tag>
        <el-tag type='' size='mini'>登陆账号：{node.data.userName}</el-tag>
        <el-tag type='success' size='mini'>姓名：{node.data.name}</el-tag>
        <el-tag type='info' size='mini'>点位：{node.data.id}</el-tag>
        <el-tag type='warning' size='mini'>会员数：{node.data.nodeCount}</el-tag>
        <el-tag type='info' size='mini'>创建时间：{node.data.creationTime}</el-tag>
      </span>
    },
    async asyncLoad2(node) {
      var _this = this
      _this.q.id = node.data.id
      this.$set(node, 'loading', true)
      const pro = await new Promise((resolve, reject) => {
        _this.getRelationshipMapData(x => {
          resolve(x)
        })
      })
      pro.forEach((el) => {
        if (!node.hasOwnProperty('children')) {
          this.$set(node, 'children', [])
        }
        node.children.push(el)
      })
      this.$set(node, 'loading', false)
    }
  }
}
</script>
